<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-20 19:58:48
 * @FilePath: \wczd-mobile\src\pages\component\hidden-danger\hiddenDanger.vue
-->
<template>
  <div class="hiddenDanger">
    <secondTopPanel>
      <div slot='title'>隐患随手拍</div>
    </secondTopPanel>
    <evanForm ref="form" class="evan-form" :label-style="{width:'220upx',paddingRight:'20upx'}" :model='formData' :rules='rules'>
      <evanFormItem label='隐患名称' prop="dangerName">
        <input class="form-input" v-model="formData.dangerName" type="text" placeholder="请输入隐患名称">
      </evanFormItem>
      <evanFormItem label='地点' prop="dangerAddress">
        <input class="form-input" v-model="formData.dangerAddress" type="text" placeholder="请输入地点">
      </evanFormItem>
      <!-- <evanFormItem label='时间' prop="findTime">
        <uniDatetimePicker type="date" v-model="formData.findTime" :clear-icon='false' :border='false'></uniDatetimePicker>
      </evanFormItem> -->
      <!-- <evanFormItem label='隐患类型' prop='dangerType'>
        <ccPicker class="cc-picker" v-model="formData.dangerType" :range="company_list"></ccPicker>
      </evanFormItem> -->
      <evanFormItem label='隐患类型' prop='dangerType' @click="openIndexPopup">
        <input class="form-input" v-model="formData.dangerTypeParse" disabled type="text" placeholder="请选择">
      </evanFormItem>

      <evanFormItem label='隐患等级' prop='isBig'>
        <ccPicker class="cc-picker" k="dictLabel" v="dictValue" v-model="formData.isBig" :range="danger_big"></ccPicker>
      </evanFormItem>
      <evanFormItem label='具体情况(含建议)' prop="dangerContent">
        <textarea class="form-input textarea" v-model="formData.dangerContent" placeholder="请输入具体情况"></textarea>
      </evanFormItem>
      <evanFormItem label='现场图片' label-position='top' prop='dangerUrls'>
        <ImageUpload @imageUrlCallBack='imageUrlCallBack'></ImageUpload>
      </evanFormItem>
      <evanFormItem label='现场视频' label-position='top' prop='videoUrls'>
        <ImageUpload :_mediaType="'video'" :_max="1" @imageUrlCallBack='videoUrlCallBack'></ImageUpload>
      </evanFormItem>
      <evanFormItem label='' label-position='top' prop='videoUrls'>
        <uni-data-checkbox :multiple="true" :localdata="range" @change="isSceneChange"></uni-data-checkbox>
      </evanFormItem>
      <template v-if="formData.isScene===1">
        <evanFormItem label='现场整改描述'>
          <input class="form-input" v-model="formData.sceneContent" type="text" placeholder="请输入现场整改描述">
        </evanFormItem>
        <evanFormItem label='现场整改图片' label-position='top' prop='sceneImageUrls'>
          <ImageUpload @imageUrlCallBack='sceneImageUrlsBack'></ImageUpload>
        </evanFormItem>
        <evanFormItem label='现场整改视频' label-position='top' prop='sceneVideoUrls'>
          <ImageUpload :_mediaType="'video'" :_max="1" @imageUrlCallBack='sceneVideoUrlsBack'></ImageUpload>
        </evanFormItem>
      </template>
    </evanForm>
    <br>
    <div class="btn">
      <button type="primary" class="submit" @click="submit">提交</button>
    </div>
    <br>
    <!-- 隐患类型弹出框 -->
    <uni-popup ref="dangerDownPopup">
      <ly-tree @node-click='handleDanger' :props="indexProps" :tree-data="dangerDownTree" node-key="value">
      </ly-tree>
    </uni-popup>
  </div>
</template>

<script>
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
import ccPicker from '@/components/cc-picker/cc-picker.vue'
import ImageUpload from "../imageUpload/imageUpload.vue";
import { dangerInfoAdd } from "@/api/danger";
import JSONParse from "@/common/JSONParse.js";

export default {
  name: 'hiddenDanger',
  components: { secondTopPanel, evanForm, evanFormItem, uniDatetimePicker, ImageUpload, ccPicker },
  data () {
    return {
      longitude: null,
      latitude: null,
      range: [{ "value": 1, "text": "是否有现场整改" }],
      formData: {
        lng: '',
        lat: '',
        isScene: '0',
        dangerSource: '2',
        dangerName: '',
        dangerTypeParse: '',
        dangerType: '',
        dangerType2: '',
        dangerContent: '',
        dangerUrls: '[]',
        videoUrls: '[]',
        sceneImageUrls: '[]',
        sceneVideoUrls: '[]',
      },
      danger_big: [],
      indexProps: {
        label: 'label',
      },
      dangerDownTree: [],
      rules: {
        dangerName: [
          { required: true, message: '隐患名称不能空' }
        ],
        dangerAddress: [
          { required: true, message: '隐患地点不能空' }
        ],
        findTime: [
          { required: true, message: '隐患时间不能空' }
        ],
        dangerType: [
          { required: true, message: '隐患类型不能空' }
        ],
        isBig: [
          { required: true, message: '隐患等级不能空' }
        ]
      }
    }
  },
  created () {
    this.dangerDownTree = JSONParse.hidden_danger_type
    this.getDicts('danger_big').then((response) => {
      const bk = []
      response.data.forEach(element => {
        if (element.dictLabel !== '白') {
          bk.push(element)
        }
      })
      this.danger_big = bk
    })
  },
  mounted () {
    // 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
    this.$refs.form.setRules(this.rules)
    this.initMap()
  },
  methods: {
    // 选中隐患类型节点
    handleDanger (obj) {
      if (obj.childNodesId.length === 0) {
        if (obj.parentId === '') {
          this.formData.dangerType = obj.label
        } else {
          this.formData.dangerTypeParse = obj.parentId + '/' + obj.label
          this.formData.dangerType = obj.parentId
          this.formData.dangerType2 = obj.label
        }
        this.$refs.dangerDownPopup.close()
      }
    },
    // 打开隐患类型弹窗
    openIndexPopup () {
      this.$refs.dangerDownPopup.open('bottom')
    },
    // 获取当前经纬度
    initMap () {
      let _this = this
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          _this.longitude = res.longitude
          _this.latitude = res.latitude
        }
      });
    },
    // 选择是否现场整改
    isSceneChange (e) {
      this.formData.isScene = e.detail.data[0]?.value || '0'
    },
    // 视频提交
    videoUrlCallBack (data) {
      this.formData.videoUrls = JSON.stringify(data)
    },
    // 图片回调
    imageUrlCallBack (data) {
      this.formData.dangerUrls = JSON.stringify(data)
    },
    sceneImageUrlsBack (data) {
      this.formData.sceneImageUrls = JSON.stringify(data)
    },
    sceneVideoUrlsBack (data) {
      this.formData.sceneVideoUrls = JSON.stringify(data)
    },
    // 隐患上报
    submit () {
      this.$refs.form.validate((response) => {
        if (response) {
          this.formData.lng = this.longitude || ''
          this.formData.lat = this.latitude || ''
          dangerInfoAdd(this.formData).then(res => {
            if (res.code === 200) {
              uni.showToast({
                title: '提交成功',
                icon: 'none',
                duration: 2000,
              })
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/home/home'
                });
              }, 1000);
            } else {
              uni.showToast({
                title: '提交失败',
                icon: 'none',
                duration: 2000,
              })
            }
          })
        }
      })

    }
  },
}
</script>

<style scoped lang="scss">
.hiddenDanger {
  display: flex;
  flex-direction: column;
  height: 100%;
  .evan-form {
    padding: 0 40upx;
    margin-top: 120upx;
    background-color: #fff;
  }
  // .btn {
  //   background-color: #fff;
  //   padding-top: 20upx;
  //   display: flex;
  //   padding-bottom: 20upx;
  //   .submit {
  //     width: 90%;
  //     line-height: 80upx;
  //   }
  //   .temp-save {
  //     width: 40%;
  //     line-height: 80upx;
  //   }
  // }
}
.form-input {
  font-size: 28upx;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  height: 60upx;
  &.textarea {
    height: 110upx;
    padding: 24rpx 0;
    text-align: left;
  }
}
/deep/ .ly-tree {
  height: 800upx;
  overflow: auto;
  z-index: 9999;
}
</style>
